<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>鹿程智慧油站商户平台</title>
    <meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"
    />
    <meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理" />
    <link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
    <link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="../layui/css/layui.css" />
    <link rel="stylesheet" href="../css/style.css" />
</head>

<body>
    <style>
    </style>
    <section>
        <!--deer-tit-->
        <div class="deer-tit">
            <h3>权限管理</h3>
            <h5><a href="权限管理.html">权限管理</a></h5>
            <h4>修改权限</h4>
        </div>
        <!--/deer-tit-->
        <!--deer-content-->
        <div class="deer-content layui-form" id="app">
            <div class="power-list">
                <div class="power-lists" v-for="(item,index) in powerList">
                    <h3 @click="clickAll(index)">
                        <input type="checkbox" name="name" :title="item.title" lay-skin="primary" :checked="item.ischecked">
                    </h3>
                    <ul>
                        <li v-for="(items,indexs) in item.listdata">
                            <div @click="clickListAll(index,indexs)">
                                <input type="checkbox" name="name" :title="items.title" lay-skin="primary" :checked="items.ischecked">
                            </div>
                            <p v-for="(itemss,indexss) in items.listdata" @click="clicklistNum(index,indexs,indexss)">
                                <input type="checkbox" name="name" lay-skin="primary" :title="itemss.title" :checked="itemss.ischecked">
                            </p>
                        </li>
                    </ul>
                </div>
            </div>

            <button class="submit" @click="clickSubmit">提交</button>
        </div>
    </section>
    <!--js-->
    <aside>

        <script type="text/javascript" src="../layui/layui.js"></script>
        <script type="text/javascript" src="../js/jquery.min.js"></script>
        <script type="text/javascript" src="../js/vue.js"></script>
        <script type="text/javascript">
            //初始化form表单的style
            layui.use('form', function () {
                window.form = layui.form;
            })

            new Vue({
                el: '#app',
                data: {
                    powerList: [],
                },
                mounted() {
                    this.$nextTick(function () {
                        console.log(123)
                        this.getPowerList()
                    })
                },
                methods: {
                    //获取初始化数据
                    getPowerList() {
                        $.get("../js/power.json", (res) => {
                            this.powerList = res.data
                        })
                    },
                    //点击一级菜单全选所有
                    clickAll(index) {
                        this.powerList[index].ischecked = !this.powerList[index].ischecked
                        let state = this.powerList[index].ischecked
                        this.powerList[index].listdata.forEach(item => {
                            item.ischecked = state
                            if (item.listdata.length > 0) {
                                item.listdata.forEach(items => {
                                    items.ischecked= state
                                })
                            }
                        })
                        this.upDate()
                    },
                    //点击二级菜单全选
                    clickListAll(index,indexs){
                        this.powerList[index].listdata[indexs].ischecked=!this.powerList[index].listdata[indexs].ischecked
                        let state= this.powerList[index].listdata[indexs].ischecked
                        this.powerList[index].listdata[indexs].listdata.forEach(item=>{
                            item.ischecked = state
                         })
                        //
                        // 当所有二级菜单没有选中时，则取消一级菜单选中
                        this._twoMenu(index, indexs)
                        this.upDate()
                    },
                    //点击三级菜单激发一级二级菜单选中
                    clicklistNum(index,indexs,indexss){
                        this.powerList[index].listdata[indexs].listdata[indexss].ischecked = !this.powerList[index].listdata[indexs].listdata[indexss].ischecked
                        let state=this.powerList[index].listdata[indexs].listdata[indexss].ischecked
                        
                        //选中三级菜单激发二级菜单选中
                        if(state){
                            this.powerList[index].listdata[indexs].ischecked=true
                        }else{
                           this._threeMenu(index,indexs,indexss)
                        }
                        this._twoMenu(index,indexs)
                        this.upDate()
                    },
                    //二级菜单全不选，取消一级菜单选中
                    _twoMenu(index,indexs){
                        let isNum = 0
                        this.powerList[index].listdata.forEach(item => {
                            if (item.ischecked) {
                                isNum++
                            }
                        })
                        if (!isNum) {
                            this.powerList[index].ischecked = false
                        } else {
                            this.powerList[index].ischecked = true
                        }
                    },
                    //三级菜单全不选，取消二级菜单选中
                    _threeMenu(index,indexs,indexss){
                        let isNum = 0
                        this.powerList[index].listdata[indexs].listdata.forEach(item => {
                            if (item.ischecked) {
                                isNum++
                            }
                        })  
                        if (!isNum) {
                            this.powerList[index].listdata[indexs].ischecked = false
                        } else {
                            this.powerList[index].listdata[indexs].ischecked = true
                        }
                    },
                    //更新form的style
                    upDate() {
                        this.$nextTick(function () {
                            form.render('checkbox')
                        })
                    },
                    //提交
                    clickSubmit(){
                        console.log(this.powerList)
                    }

                }
            })



        </script>
    </aside>
    <!--/js-->
</body>

</html>